<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>allinone thumbnails演示(cool皮肤/固定尺寸)_素材火</title>

<link rel="stylesheet" href="css/allinone_thumbnailsBanner.css">
<script src="http://www.sucaihuo.com/Public/js/other/jquery.js"></script>
<script src="js/jquery-ui-1.10.2.min.js"></script>
<script src="js/allinone_thumbnailsBanner.js"></script>
<script src="js/reflection.js" type="text/javascript"></script>

<script>
$(function() {
	$('#allinone_thumbnailsBanner_cool').allinone_thumbnailsBanner({
		skin: 'cool',
		numberOfThumbsPerScreen:7,
		width: 960,
		height: 384,
		origthumbsHolderWrapperH:121,
		thumbsWrapperMarginTop:0,
		defaultEffect: 'random' 
	});
});
</script>
</head>

<body>
<h1>allinone thumbnails演示(cool皮肤/固定尺寸)</h1>

<!-- 代码开始 -->
<div style="width:960px; height:400px; margin: 0 auto;">
	<div id="allinone_thumbnailsBanner_cool" style="display:none;">
		<ul class="allinone_thumbnailsBanner_list">
			<!-- 图片 -->
			<li data-bottom-thumb="images/cool/thumbs/01_cool.jpg" data-text-id="#allinone_thumbnailsBanner_photoText1"><img src="images/cool/01_cool.jpg" alt="" /></li>
			<li data-bottom-thumb="images/cool/thumbs/02_cool.jpg" data-text-id="#allinone_thumbnailsBanner_photoText2"><img src="images/cool/02_cool.jpg" alt="" /></li>
			<li data-bottom-thumb="images/cool/thumbs/03_cool.jpg" data-text-id="#allinone_thumbnailsBanner_photoText3"><img src="images/cool/03_cool.jpg" alt="" /></li>
			<li data-bottom-thumb="images/cool/thumbs/04_cool.jpg" data-text-id="#allinone_thumbnailsBanner_photoText4"><img src="images/cool/04_cool.jpg" alt="" /></li>
			<li data-bottom-thumb="images/cool/thumbs/05_cool.jpg" data-text-id="#allinone_thumbnailsBanner_photoText5"><img src="images/cool/05_cool.jpg" alt="" /></li>
			<li data-bottom-thumb="images/cool/thumbs/01_cool.jpg" data-text-id="#allinone_thumbnailsBanner_photoText1"><img src="images/cool/01_cool.jpg" alt="" /></li>
			<li data-bottom-thumb="images/cool/thumbs/02_cool.jpg" data-text-id="#allinone_thumbnailsBanner_photoText2"><img src="images/cool/02_cool.jpg" alt="" /></li>
			<li data-bottom-thumb="images/cool/thumbs/03_cool.jpg" data-text-id="#allinone_thumbnailsBanner_photoText3"><img src="images/cool/03_cool.jpg" alt="" /></li>
			<li data-bottom-thumb="images/cool/thumbs/04_cool.jpg" data-text-id="#allinone_thumbnailsBanner_photoText4"><img src="images/cool/04_cool.jpg" alt="" /></li>
			<li data-bottom-thumb="images/cool/thumbs/05_cool.jpg" data-text-id="#allinone_thumbnailsBanner_photoText5"><img src="images/cool/05_cool.jpg" alt="" /></li>
			<li data-bottom-thumb="images/cool/thumbs/01_cool.jpg" data-text-id="#allinone_thumbnailsBanner_photoText1"><img src="images/cool/01_cool.jpg" alt="" /></li>
			<li data-bottom-thumb="images/cool/thumbs/02_cool.jpg" data-text-id="#allinone_thumbnailsBanner_photoText2"><img src="images/cool/02_cool.jpg" alt="" /></li>
			<li data-bottom-thumb="images/cool/thumbs/03_cool.jpg" data-text-id="#allinone_thumbnailsBanner_photoText3"><img src="images/cool/03_cool.jpg" alt="" /></li>
			<li data-bottom-thumb="images/cool/thumbs/04_cool.jpg" data-text-id="#allinone_thumbnailsBanner_photoText4"><img src="images/cool/04_cool.jpg" alt="" /></li>
			<li data-bottom-thumb="images/cool/thumbs/05_cool.jpg" data-text-id="#allinone_thumbnailsBanner_photoText5"><img src="images/cool/05_cool.jpg" alt="" /></li>
			<li data-bottom-thumb="images/cool/thumbs/01_cool.jpg" data-text-id="#allinone_thumbnailsBanner_photoText1"><img src="images/cool/01_cool.jpg" alt="" /></li>
			<li data-bottom-thumb="images/cool/thumbs/02_cool.jpg" data-text-id="#allinone_thumbnailsBanner_photoText2"><img src="images/cool/02_cool.jpg" alt="" /></li>
			<li data-bottom-thumb="images/cool/thumbs/03_cool.jpg" data-text-id="#allinone_thumbnailsBanner_photoText3"><img src="images/cool/03_cool.jpg" alt="" /></li>
			<li data-bottom-thumb="images/cool/thumbs/04_cool.jpg" data-text-id="#allinone_thumbnailsBanner_photoText4"><img src="images/cool/04_cool.jpg" alt="" /></li>
			<li data-bottom-thumb="images/cool/thumbs/05_cool.jpg" data-text-id="#allinone_thumbnailsBanner_photoText5"><img src="images/cool/05_cool.jpg" alt="" /></li>
			<li data-bottom-thumb="images/cool/thumbs/02_cool.jpg" data-text-id="#allinone_thumbnailsBanner_photoText2" data-link="http://www.sucaihuo.com/js/249.html" data-target="_blank"><img src="images/cool/02_cool.jpg" alt="" /></li>
		</ul>
		
		<!-- 文字 -->
		<div id="allinone_thumbnailsBanner_photoText1" class="allinone_thumbnailsBanner_texts">
			<div class="allinone_thumbnailsBanner_text_line textElement11_cool" data-initial-left="50" data-initial-top="10" data-final-left="50" data-final-top="40" data-duration="0.5" data-fade-start="0" data-delay="0">Up to 5 types of banners</div>
			<div class="allinone_thumbnailsBanner_text_line textElement12_cool" data-initial-left="50" data-initial-top="10" data-final-left="50" data-final-top="70" data-duration="0.5" data-fade-start="0" data-delay="0.3">Each with multiple SKINS</div>
		</div>
		<div id="allinone_thumbnailsBanner_photoText2" class="allinone_thumbnailsBanner_texts">
			<div class="allinone_thumbnailsBanner_text_line textElement21_cool" data-initial-left="550" data-initial-top="60" data-final-left="550" data-final-top="60" data-duration="0.5" data-fade-start="0" data-delay="0">16 transition effects</div>
			<div class="allinone_thumbnailsBanner_text_line textElement22_cool" data-initial-left="550" data-initial-top="125" data-final-left="550" data-final-top="125" data-duration="0.5" data-fade-start="0" data-delay="0.3">optional can set the transition<br />
				for each image</div>
		</div>
		<div id="allinone_thumbnailsBanner_photoText3" class="allinone_thumbnailsBanner_texts">
			<div class="allinone_thumbnailsBanner_text_line textElement31_cool" data-initial-left="480" data-initial-top="60" data-final-left="50" data-final-top="60" data-duration="0.5" data-fade-start="0" data-delay="0">Animated text from any direction</div>
			<div class="allinone_thumbnailsBanner_text_line textElement32_cool" data-initial-left="0" data-initial-top="75" data-final-left="50" data-final-top="75" data-duration="0.5" data-fade-start="0" data-delay="0.3">top, bottom, left and right</div>
			<div class="allinone_thumbnailsBanner_text_line textElement33_cool" data-initial-left="50" data-initial-top="250" data-final-left="50" data-final-top="110" data-duration="1" data-fade-start="0" data-delay="0.5">Any color, CSS and HTML formated</div>
		</div>
		<div id="allinone_thumbnailsBanner_photoText4" class="allinone_thumbnailsBanner_texts">
			<div class="allinone_thumbnailsBanner_text_line textElement41_cool" data-initial-left="50" data-initial-top="0" data-final-left="50" data-final-top="260" data-duration="0.5" data-fade-start="0" data-delay="0">Line One is here</div>
			<div class="allinone_thumbnailsBanner_text_line textElement42_cool" data-initial-left="50" data-initial-top="384" data-final-left="50" data-final-top="240" data-duration="0.5" data-fade-start="0" data-delay="0.3">Line Two over there</div>
		</div>
		<div id="allinone_thumbnailsBanner_photoText5" class="allinone_thumbnailsBanner_texts">
			<div class="allinone_thumbnailsBanner_text_line textElement51_cool" data-initial-left="400" data-initial-top="350" data-final-left="400" data-final-top="52" data-duration="0.5" data-fade-start="0" data-delay="0"><a href="http://www.sucaihuo.com/js/249.html" target="_blank">Cool Title Right Here</a></div>
			<div class="allinone_thumbnailsBanner_text_line textElement52_cool" data-initial-left="400" data-initial-top="110" data-final-left="400" data-final-top="92" data-duration="0.5" data-fade-start="0" data-delay="0.3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis <a href="http://www.sucaihuo.com/js/249.html" target="_blank"> aute irure </a> dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
			<div class="allinone_thumbnailsBanner_text_line textElement53_cool" data-initial-left="400" data-initial-top="350" data-final-left="400" data-final-top="262" data-duration="0.5" data-fade-start="0" data-delay="0"><a href="http://www.sucaihuo.com/js/249.html" target="_blank">Click - this is a button</a></div>
		</div>
	</div>
</div>
<!-- 代码结束 -->

               
               
 





<!-- 以下是统计和广告，与演示无关，不必理会 -->
<style type="text/css">
body { margin: 0;}
h1 { margin: 40px 10px; font: 32px Microsoft Yahei; text-align: center;}

.vad { margin:150px 0 5px; font-family: arial,宋体,sans-serif; text-align:center;}
.vad a { display:inline-block; height: 30px; line-height: 30px; margin:0 5px; padding:0 20px; font-size:14px; text-align:center; color:#eee; text-decoration:none; background-color:#222;}
.vad a:hover { color:#fff; background-color:#000;}

.a728x90 { width: 728px; height: 90px; margin: 0 auto;}
</style>

<p class="vad"><a href="http://www.sucaihuo.com/" target="_blank">sucaihuo.com</a> <a href="http://www.sucaihuo.com/js/249.html" target="_blank">说 明</a> <a href="http://www.sucaihuo.com/js/249.html" target="_blank">下 载</a></p>

<div class="a728x90"><!--#include file="/inc/ggad728x90.inc"--></div>

<script>
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F988268596e7a833ffbfb2e9f82d93e18' type='text/javascript'%3E%3C/script%3E"));
</script>

<script id="bdshare_js" data="type=slide&amp;img=0&amp;pos=right&amp;uid=6588891" ></script>
<script id="bdshell_js"></script>
<script>
var bds_config={"bdTop":300};
document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000);
</script>

</body>
</html>